<template>
  <view>
    <view class="container">
      <el-row :gutter="30">
        <el-col :xs="24">
          <el-form :model="queryParams" ref="queryForm" inline label-width="68px">
            <el-form-item label="学校名称" prop="schoolname">
              <el-input
                  v-model="queryParams.school"
                  placeholder="请输入学校名称"
                  clearable
                  size="small"
                  style="width: 240px"
              />
            </el-form-item>
            <el-form-item>
              <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
              <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
            </el-form-item>
          </el-form>
        </el-col>
      </el-row>
      <el-row>
        <el-col>
          <el-table v-loading="loading" :data="projects">
            <el-table-column label="序号" align="center" type="index" show-overflow-tooltip width="100">
              <template slot-scope="scope">{{
                  (queryParams.pageNum - 1) * queryParams.pageSize + scope.$index + 1
                }}
              </template>
            </el-table-column>
            <el-table-column label="用户名称" align="center" key="_id" prop="username"/>
            <el-table-column label="学校" align="center" prop="school" key="school"/>
            <el-table-column label="操作" align="center">
              <template slot-scope="scope">
                <el-button type="text" @click="showUser(scope.row)">查看</el-button>
              </template>
            </el-table-column>
          </el-table>
          <el-pagination
              v-show="total>0"
              :total="total"
              :current-page.sync="queryParams.pageNum"
              :page-size.sync="queryParams.pageSize"
              hide-on-single-page
              background
              layout="pager,total"
              @current-change="getList"
          />
        </el-col>
      </el-row>
    </view>
    <el-dialog :visible="showDialog" :before-close="handleClose">
      <UserInfoDisplay :user="user" />
    </el-dialog>
  </view>
</template>

<script>
import {getTypeList, getUsers} from "../../../api/project";
// import UserInfoDisplay from "../../../components/UserInfoDisplay/UserInfoDisplay.vue"
import UserInfoDisplay from "../../../components/userInfoDisplay/UserInfoDisplay.vue"
export default {
  components:{
    UserInfoDisplay
  },
  data() {
    return {
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        school: null
      },
      total: 0,
      projectType: [],
      projects: [],
      loading: false,
      showDialog:false,
      user:null
    }
  },
  created: function () {
    getTypeList()
    this.getList()
  },
  methods: {
    getList() {
      this.loading = true
      getUsers(this.queryParams)
          .then(res => {
            this.total = res.result.count
            this.projects = res.result.data
          })
      this.loading = false
    },
    typeFormat(row, col, cell, index) {
      for (const projectTypeElement of this.projectType) {
        if (projectTypeElement.value === cell) return projectTypeElement.type
      }
      return cell
    },
    resetQuery() {
      this.queryParams.school = null
      this.handleQuery()
    },
    handleQuery() {
      this.queryParams.page = 1
      this.getList()
    },
    showUser(row) {
      console.log(row);
      this.user = row
      this.showDialog = true
    },
		handleClose(done) {
        this.$confirm('确认关闭？')
          .then(_ => {
            this.showDialog = false
          })
          .catch(_ => {});
    }
  }
}
</script>

<style scoped>

</style>
